<template>
  <div class="in-order-detail-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>入库订单详情 - {{ orderData._id }}</span>
          <el-tag :type="statusMap[orderData.status]?.type || 'info'">
            {{ orderData.status }}
          </el-tag>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单ID">{{ orderData._id }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ orderData.productName }}</el-descriptions-item>
        <el-descriptions-item label="入库数量">{{ orderData.quantity }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ orderData.supplier }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ formatTime(orderData.createdAt) }}</el-descriptions-item>
      </el-descriptions>

      <div class="action-buttons" style="margin-top: 20px;">
        <el-button 
          v-if="orderData.status === '待审核'"
          type="primary"
          @click="handleApprove"
        >审核通过</el-button>
        <el-button 
          v-if="orderData.status === '待审核'"
          type="danger"
          @click="handleReject"
        >审核不通过</el-button>
        <el-button 
          v-if="orderData.status === '待入库' && orderData.status.trim() === '待入库'"
          type="success"
          @click="handleConfirm"
        >确认入库</el-button>
        <el-button 
          v-if="orderData.status === '审核不通过' && orderData.status.trim() === '审核不通过'"
          type="warning"
          @click="handleReAudit"
        >重新审核</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { logisticsApi } from '@/api/logistics'
import dayjs from 'dayjs'

const route = useRoute()
const orderData = ref({
  _id: '',
  productName: '',
  quantity: 0,
  supplier: '',
  status: '',
  createdAt: ''
})

// 状态颜色映射
const statusMap = {
  '待审核': { type: 'info' },
  '审核不通过': { type: 'danger' },
  '待入库': { type: 'warning' },
  '已入库': { type: 'success' }
}

// 时间格式化
const formatTime = (time) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    const res = await logisticsApi.getInboundOrderDetail(route.params.id)
    console.log('API返回数据:', res)  // 添加这行
    orderData.value = res
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '获取订单详情失败')
  }
}

// 审核通过
const handleApprove = async () => {
  try {
    await logisticsApi.approveInboundOrder(route.params.id)
    ElMessage.success('审核通过')
    await fetchOrderDetail()
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '审核失败')
  }
}

// 审核不通过
const handleReject = async () => {
  try {
    await logisticsApi.rejectInboundOrder(route.params.id)
    ElMessage.success('审核不通过')
    await fetchOrderDetail()
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '审核失败')
  }
}

// 确认入库
const handleConfirm = async () => {
  try {
    await logisticsApi.confirmInboundOrder(route.params.id)
    ElMessage.success('入库确认成功')
    await fetchOrderDetail()
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '确认入库失败')
  }
}

// 重新审核
const handleReAudit = async () => {
  try {
    await logisticsApi.reAuditInboundOrder(route.params.id)
    ElMessage.success('已重新提交审核')
    await fetchOrderDetail()
  } catch (err) {
    ElMessage.error(err.response?.data?.message || '重新审核失败')
  }
}

onMounted(() => {
  fetchOrderDetail()
})
</script>

<style scoped>
.in-order-detail-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
</style>